<template>
  <div class="bg-white !h-screen">
    <Table
      :columns="tableColumns"
      :data-source="dataSource"
      :expandedRowKeys="expandedRowKeys"
      :loading="loading"
      :pagination="pagination"
      :row-key="
        (record) => {
          if (record.apiId) {
            return record.apiId;
          } else {
            return record.tenantCode;
          }
        }
      "
      :scroll="scroll"
      bordered
      size="large"
      sticky
      @change="handleTableChange"
      @expand="getInnerDataHandler"
    >
      <template #expandedRowRender="{}">
        <Table :columns="innerColumn" :data-source="innerData">
          <template #action="{ record }">
            <span v-per="perName" class="flex justify-center">
              <a @click="childHandleView(record)"> <ExclamationCircleOutlined /></a>
            </span>
          </template>
        </Table>
      </template>
      <template #action="{ record }">
        <span v-per="perName" class="flex justify-center">
          <a @click="parentHandleView(record)"> <ExclamationCircleOutlined /></a>
        </span>
      </template>
    </Table>
    <ParentNodeDrawer ref="parentDrawerRef"></ParentNodeDrawer>
    <ChildNodeDrawer ref="childDrawerRef"></ChildNodeDrawer>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue';
import { Table, TableProps } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import ParentNodeDrawer from '/@/views/measurement-center/function-statistic/component/parentNodeDrawer.vue';
import ChildNodeDrawer from '/@/views/measurement-center/function-statistic/component/childNodeDrawer.vue';

const loading = ref(true);
const props = defineProps({
  perName: String,
  columns: Array,
  defaultParams: Object,
  primaryParams: Object,
  childParams: Object,
  flag: Number,
  innerColumns: Array,
  getTableData: {
    type: Function,
    default: () => {
      return Function;
    },
  },
  getSubTableData: {
    type: Function,
    default: () => {
      return Function;
    },
  },
});
const drawerProps = ref({
  apiId: '',
  tenantCode: '',
  startDate: '',
  endDate: '',
});
const perName = computed(() => {
  return props.perName;
});
const scroll = ref<undefined | object>(undefined);
const parentDrawerRef = ref();
const childDrawerRef = ref();
const tableColumns = computed(() => {
  return props.columns;
});
const innerColumn = computed(() => {
  return props.innerColumns;
});
const innerData = ref([]);
const dataSource = ref([]);
let current = ref(1);
let size = ref('10');
const total = ref('0');
const expandedRowKeys = ref([]);
const pagination = computed(() => ({
  showSizeChanger: true,
  current: current.value,
  size: size.value,
  total: total.value,
  // pageSizeOptions: ["5", "10", "20", "30", "40", "100"],
  showTotal: (total: number) => {
    return `共 ${total} 条`;
  },
}));
watch(
  () => props.flag,
  () => {
    props
      .getTableData({
        ...{
          current: pagination.value.current,
          size: pagination.value.size,
        },
        ...props.primaryParams,
      })
      .then((res) => {
        dataSource.value = res.items;
        total.value = res.total;
        current.value = pagination.value.current;
        size.value = pagination.value.size;
      });
  }
);
onMounted(() => {
  try {
    props
      .getTableData({
        ...{
          current: pagination.value.current,
          size: pagination.value.size,
        },
        ...props.defaultParams,
      })
      .then((res) => {
        dataSource.value = res.items;
        total.value = res.total;
      });
  } finally {
    loading.value = false;
  }
});

// 列表当前页更改
const handleTableChange: TableProps['onChange'] = (pag) => {
  pagination.value.current = Number(pag.current);
  pagination.value.size = String(pag.size);
  if (Number(pagination.value.size) > 10) {
    scroll.value = { x: 'max-content', y: 500 };
  }
  if (props.primaryParams) {
    props
      .getTableData({
        ...{
          current: pagination.value.current,
          size: pagination.value.size,
        },
        ...props.primaryParams,
      })
      .then((res) => {
        dataSource.value = res.items;
        total.value = res.total;
        current.value = Number(pag.current);
        size.value = String(pag.size);
      });
  } else {
    props
      .getTableData({
        ...{
          current: pagination.value.current,
          size: pagination.value.size,
        },
        ...props.defaultParams,
      })
      .then((res) => {
        dataSource.value = res.items;
        total.value = res.total;
        current.value = Number(pag.current);
        size.value = String(pag.size);
      });
  }
};

function parentHandleView(record: Recordable) {
  if (props.childParams) {
    drawerProps.value.apiId = record.apiId;
    drawerProps.value.tenantCode = record.tenantCode;
    drawerProps.value.startDate = props.defaultParams.startDate;
    drawerProps.value.endDate = props.defaultParams.endDate;
  } else {
    drawerProps.value.apiId = record.apiId;
    drawerProps.value.tenantCode = record.tenantCode;
    drawerProps.value.startDate = props.childParams.startDate;
    drawerProps.value.endDate = props.childParams.endDate;
  }
  parentDrawerRef.value.openDrawer(drawerProps.value);
}

function childHandleView(record: Recordable) {
  if (props.childParams) {
    drawerProps.value.apiId = record.apiId;
    drawerProps.value.tenantCode = record.tenantCode;
    drawerProps.value.startDate = props.defaultParams.startDate;
    drawerProps.value.endDate = props.defaultParams.endDate;
  } else {
    drawerProps.value.apiId = record.apiId;
    drawerProps.value.tenantCode = record.tenantCode;
    drawerProps.value.startDate = props.childParams.startDate;
    drawerProps.value.endDate = props.childParams.endDate;
  }
  childDrawerRef.value.openDrawer(drawerProps.value);
}

async function getInnerDataHandler(expended, record) {
  if (expended) {
    expandedRowKeys.value = [];
    if (record.apiId) {
      expandedRowKeys.value.push(record.apiId);
    } else {
      expandedRowKeys.value.push(record.tenantCode);
    }

    if (props.childParams) {
      innerData.value = await props.getSubTableData({
        ...{ apiId: record.apiId },
        ...{ tenantCode: record.tenantCode },
        ...props.defaultParams,
      });
    } else {
      innerData.value = await props.getSubTableData({
        ...{ apiId: record.apiId },
        ...{ tenantCode: record.tenantCode },
        ...props.childParams,
      });
    }
  } else {
    expandedRowKeys.value = [];
  }
}
</script>

<style lang="less" scoped></style>
